import React, { PureComponent, useContext } from 'react'
const ThemeContext = React.createContext()
// class MyButton extends PureComponent {
//   render () {
//     return (
//       <>
//         <button>按钮</button> 
//         <ThemeContext.Consumer>
//           {
//             (value) => { // value即为祖先组件传递给后代组件的值
//               return <p>{ value }</p>
//             }
//           }
//         </ThemeContext.Consumer>
//       </>
//     )
//   }
// }
function MyButton () {
  const theme = useContext(ThemeContext)
  return (
    <div>
      <button>按钮</button> 
      { theme }
    </div>
  )
}
class ToolBar extends PureComponent {
  render () {
    return (
      <MyButton></MyButton>
    )
  }
}

export default class App extends PureComponent {
  state = { theme: 'light'}
  render() {
    return (
      // Context.Provider 传递数据只能使用 value 属性
      <ThemeContext.Provider value={ this.state.theme }>
        <ToolBar/>
      </ThemeContext.Provider>
    )
  }
}

